<template>
  <div class="nav-item-setting-wrap" :class="{isActive: currentModule === 'config' || currentModule === 'newConfig'}" @click="goSetting">
    <div class="nav-item-wrap config" data-v-7moor>
      <!-- <div class="nav-item-icon" v-bind:class="[navType]"> -->
      <el-badge is-dot :class="{m7badge: true,'navMenuState': navMenuState}">
        <span class="iconfont" :class="ic"></span>
      </el-badge>
      <span class="nav-icon-title ellipsis" v-show="navMenuState" :title="tipContent">{{tipContent}}</span>
      <!-- </div> -->
      <div v-show="!navMenuState" class="tooltip tooltip-div">{{tipContent}}
      </div>
      <i v-show="!navMenuState" class="tooltip tooltip-i"></i>
    </div>
  </div>
</template>
<script>
  import {isHasMenu} from '@/utils/m7Utils'
  export default {
    name: 'navItemSetting',
    data () {
      return {
      }
    },
    computed: {
      navMenuState () {
        return this.$store.state.navMenuState || false
      },
      currentModule () {
        return this.$route.path.split('/')[2]
      },
      isAdmin () {
        return this.$store.state.session.user.isAdmin || false
      }
    },
    methods: {
      goSetting () {
        if (this.$route.path.split('/')[2] === 'config' || this.$route.path.split('/')[2] === 'newConfig') {
          return
        }
        let session = window.sessionStorage
        if (session.getItem('config')) {
          let data = JSON.parse(session.getItem('config'))
          console.log(data, data.url)
          if (data.url) {
            this.$router.push({path: data.url})
          }
          return
        }
        let oldSettingFunc = 'nav_config'
        let newSettingFunc = 'default_show_simple_config'  // 默认去简单版
        let user = this.$store.state.session.user
        if (this.isAdmin) {
          this.$router.push({path: '/index/config'})
          return
        }
        if (isHasMenu(newSettingFunc, user)) {
          this.$router.push({path: '/index/newConfig/accountConfig'})
        } else if (isHasMenu(oldSettingFunc, user)) {
          this.$router.push({path: '/index/config'})
        }
      }
    },
    props: ['tipContent', 'ic']
  }
</script>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl'
  .nav-item-setting-wrap
    cursor pointer
    .nav-item-wrap
      padding: 15px 0 15px 17px;
      position: relative;
      text-align: left;
      color: #fff
  .tooltip-i
    position: absolute;
    margin: 0 0 0 4px;
    width: 2px;
    height: 1px;
    border-width: 5px;
    border-style: solid;
    opacity: 0.8;
    border-color: transparent rgb(28, 141, 224) transparent transparent;
    border-image: initial;
    left: 59px;
    z-index: 2000;
    top: 10px;
  .tooltip-div
    position: absolute
    z-index: 50000
    opacity: 0.8
    background-color: rgb(28, 141, 224)
    padding: 9px 10px
    color: $cf-white
    border-radius: 4px
    white-space: nowrap
    left: 75px
    top 2px
  .tooltip
    visibility hidden
  .nav-item-setting-wrap:hover
    background-color #001023
    .tooltip
      visibility visible
  .iconfont
    font-size 1.8em
    color #99a3ae
  .nav-icon-title
    color #fff
    width: 60px;
    position: absolute;
    top: 12px;
    left: 46px;
    font-size: 14px;
  .iconfont
    color #fff
  .nav-item-setting-wrap.isActive
    background #459AE9
    .iconfont
      color #fff
    .nav-icon-title
      color #fff
  .navMenuState
    height 20px
    .iconfont
       font-size 18px
</style>
